<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品详情</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/shop.css">
</head>
<body>
    <!-- 图片轮播 -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <c:forEach items="fourImageList" var="images">
                <div class="item">
                    <img src="<%=request.getContextPath() %>/resources/images/goodsImages/${images}" alt="">
                </div>
            </c:forEach>
        </div>
        <a href="#myCarousel" data-slide="prev" class="carousel-control left"> ‹ </a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right"> › </a>
    </div>

    <div class="goodsdetail container">
        <div class="row">
            <div class="col-xs-10 col-md-10">
                <h4>${goods.name}</h4>
            </div>
            <div class="col-xs-2 col-md-2">
                <span class="glyphicon glyphicon-star-empty"></span>
                <br>
                <small>收藏</small>
            </div>
        </div>

        <h5 class="price">微信价：${goods.price}</h5>
        <small><s>原价：￥6288.00</s></small>
        <br>
        <small>快递 免运费</small>
        <small class="pull-right">销量 ${goods.salesnum}件</small>
        <hr>
        <h5>颜色</h5>
        <button class="btn btn-default" type="button">灰色</button>
        <button class="btn btn-default" type="button">金色</button>
        <button class="btn btn-default" type="button">银色</button>
        <h5>容量</h5>
        <button class="btn btn-default" type="button">16G</button>
        <h5>物流方式</h5>
        <button class="btn btn-default">物流配送</button>
        <hr>
        数量&nbsp;
        <div class="btn-group" role="group">
            <button class="btn reduce" type="button">-</button>
            <input class="btn btn-default goodsnum" type="text" disabled="disabled" value="1">
            <button class="btn add" type="button">+</button>
        </div>
        （剩余51）
        <hr>
    </div>

    <div class="container tabable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">商品属性</a></li>
            <li><a href="#tab2" data-toggle="tab">图文详情</a></li>
            <li><a href="#tab3" data-toggle="tab">评价</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <table class="table" id="detailtab">
                    <tr>
                        <td>商品名称</td>
                        <td>${goods.name}</td>
                    </tr>
                    <tr>
                        <td>品牌</td>
                        <td>${goods.brand}</td>
                    </tr>
                    <tr>
                        <td>上架时间</td>
                        <td>${goods.uptime}</td>
                    </tr>
                    <tr>
                        <td>处理器</td>
                        <td>${goods.CPU}</td>
                    </tr>
                    <tr>
                        <td>显卡</td>
                        <td>${goods.graphic}</td>
                    </tr>
                    <tr>
                        <td>内存容量</td>
                        <td>${goods.RAM}</td>
                    </tr>
                    <tr>
                        <td>硬盘容量</td>
                        <td>${goods.HD}</td>
                    </tr>
                </table>
            </div>
            <div class="tab-pane" id="tab2">
                <c:forEach items="detailImageList" var="images">
                    <img class="img-responsive" src="<%=request.getContextPath() %>/resources/images/goodsImages/${images}" alt="">
                </c:forEach>
            </div>
            <div class="tab-pane" id="tab3">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active">好评（3）</button>
                    <button type="button" class="btn btn-default">中评（0）</button>
                    <button type="button" class="btn btn-default">差评（0）</button>
                </div>
                <div class="comments">
                    <table class="table">
                        <tr>
                            <td>
                                <img src="<%=request.getContextPath() %>/resources/images/usericon.jpg" alt="" class="img-circle">
                                <p>user1</p>
                                <small>普通会员</small>
                            </td>
                            <td>
                                <div class="comm">
                                    <img src="<%=request.getContextPath() %>/resources/images/star.png" alt="">
                                    <small class="pull-right">2014-10-27 11:52:03</small>
                                </div>
                                <p>电脑蛮好的，性价比相当高</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="<%=request.getContextPath() %>/resources/images/usericon.jpg" alt="" class="img-circle">
                                <p>user2</p>
                                <small>普通会员</small>
                            </td>
                            <td>
                                <div class="comm">
                                    <img src="<%=request.getContextPath() %>/resources/images/star.png" alt="">
                                    <small class="pull-right">2014-12-27 15:33:03</small>
                                </div>
                                <p>很好！很好！很好！很好！很好！</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="<%=request.getContextPath() %>/resources/images/usericon.jpg" alt="" class="img-circle">
                                <p>user3</p>
                                <small>普通会员</small>
                            </td>
                            <td>
                                <div class="comm">
                                    <img src="<%=request.getContextPath() %>/resources/images/star.png" alt="">
                                    <small class="pull-right">2015-03-27 11:52:03</small>
                                </div>
                                <p>不错，速度快。这个质量对得起这个价格！</p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部菜单 -->
    <nav id="goodsnav" class="navbar navbar-default navbar-fixed-bottom">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-star-empty"></span>
        </button>
        <a href="<%=request.getContextPath() %>/weixin/cart" class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-shopping-cart"></span>
            <span id="mybadge" class="badge">1</span>
        </a>
        <button id="addToCart" class="btn btn-warning" type="button" data-toggle="modal"
                data-target=".bs-example-modal-sm">加入购物车</button>
        <button class="btn btn-danger" type="button">立即购买</button>
    </nav>

    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="addSucess" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body center">成功加入购物车</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default">去结算</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">继续购物</button>
                </div>
            </div>
        </div>
    </div>
<script src="<%=request.getContextPath() %>/resources/js/jquery-1.11.2.min.js"></script>
<script src="<%=request.getContextPath() %>/resources/js/bootstrap.min.js"></script>
<script src="<%=request.getContextPath() %>/resources/js/shop.js"></script>
<script type="text/javascript">
    $("#addToCart").click(function() {
        $.post("<%=request.getContextPath() %>/weixin/addToCart", {
            goodsId: ${goods.id},
            goodsnum: $(".goodsnum").val()
        }, function() {})
    });
</script>
</body>
</html>